<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Add Podcast - PodGrab</title>
    {{template "commoncss" .}}
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      {{template "navbar" .}}
      <br />
      <div id="app" v-cloak>
        <div class="row">
          <h4>Add using the direct link to rss feed</h4>
          <form action="/" method="post" @submit="addPodcastManual">
            <div class="nine columns">
              <input
                type="url"
                v-model="url"
                name="url"
                id="url"
                placeholder="Enter Podcast RSS feed to add"
                class="u-full-width"
              />
            </div>
            <div class="three columns">
              <input
                type="submit"
                value="Add Podcast"
                class="u-full-width button"
              />
            </div>
          </form>
        </div>
        <hr />
        <div class="row">
          <div>
            <h4>Import OPML file</h4>
            <i
              ><small
                >Most of the major podcast manager apps (eg. Podcast Addict)
                have the option to export add your podcast subscriptions in the
                opml format. You can migrate all your podcast in one go by
                exporting that OPML file and importing it here.</small
              ></i
            >
          </div>
          <br />

          <form
            enctype="multipart/form-data"
            action="/"
            @submit="uploadOpml"
            ref="uploadForm"
          >
            <div class="nine columns">
              <input
                type="file"
                @change="selectFile"
                ref="file"
                accept="text/xml,.opml"
              />
            </div>

            <div class="three columns">
              <input
                type="submit"
                value="Upload"
                class="u-full-width button"
              />
            </div>
          </form>
        </div>
        <hr />
        <div class="row" id="searchContainer">
          <h4>Search for your favorite podcast</h4>
          <i
            ><small
              >Experimental: Uses iTunes API to show search results.</small
            ></i
          >
          <br />
          <form action="/search" method="post" @submit="search">
            <div class="seven columns">
              <input
                type="search"
                name="search"
                id="search"
                placeholder="Search for your podcast"
                v-model="query"
                class="u-full-width"
              />
            </div>
            <div class="three columns">
              <select
                type="submit"
                class="u-full-width button"
                v-model="searchSource"
                name="searchSource"
              >
            {{range $key, $value := .searchOptions}}
            <option value="{{$key}}">{{$value}}</option>
            {{end}}
            </select>

            </div>
            <div class="two columns">
              <input
                type="submit"
                value="Search"
                class="u-full-width button"
              />
            </div>
          </form>
          <br />
          <progress v-show="searching" class="u-full-width"></progress>
          <div class="results">
            <div v-for="item in results" :key="item.url" class="row">
            
                <div class="columns two">
                  <img
                    class="u-full-width"
                    :src="item.image"
                    :alt="item.title"
                  />
                </div>
                <div class="columns nine">
                  <h5 style="margin-bottom: 0px;">${item.title}</h5>
                  <small v-if="item.categories && item.categories.length">

                    Categories: ${item.categories.join(', ')}
                  </small>
                  <p v-if="item.description">${ item.description }</p>
                </div>
                <div class="columns one">
                  <button
                    v-if="!item.already_saved"
                    v-on:click="addPodcast(item)"
                    class="button button"
                  >
                    + Add
                  </button>
                  <button
                    v-if="item.already_saved"
                    class="button"
                    disabled="disabled"
                  >
                    Already Added
                  </button>
                </div>
            
              <hr />
            </div>
          </div>
        </div>
      </div>
    </div>
    {{template "scripts"}}

    <script>
      var app = new Vue({
        delimiters: ["${", "}"],
        el: "#app",
        data: {
          results: [],
          query: "",
          searchSource:"itunes",
          searching: false,
          url: "",
          selectedFiles: undefined,
        },
        mounted(){
          if(localStorage && localStorage.searchSource){
            this.searchSource=localStorage.searchSource;
          }
        },
        watch:{
          searchSource(newSource,oldSource){
            if(newSource===oldSource){
              return;
            }
            if(localStorage){
              localStorage.searchSource=newSource
            }
          }
        },
        methods: {
          selectFile: function () {
            this.selectedFiles = this.$refs.file.files;
          },
          uploadOpml: function (e) {
            e.preventDefault();
            var currentFile = this.selectedFiles.item(0);
            if (!currentFile) {
              return;
            }
            var self = this;
            self.searching = true;
            var formData = new FormData();

            formData.append("file", currentFile);
            axios
              .post("/opml", formData, {
                headers: {
                  "Content-Type": "multipart/form-data",
                },
              })
              .then(function (response) {
                Vue.toasted.show("File uploaded successfully.", {
                  theme: "bubble",
                  type: "success",
                  position: "top-right",
                  duration: 5000,
                });
                item.already_saved = true;
              })
              .catch(function (error) {
                if (error.response && error.response.data && error.response.data.message) {
                  Vue.toasted.show(error.response.data.message, {
                    theme: "bubble",
                    type: "error",
                    position: "top-right",
                    duration: 5000,
                  });
                }
              })
              .then(function () {
                self.searching = false;

                self.$refs.uploadForm.reset();
              });
          },
          search: function (e) {
            e.preventDefault();
            if (!this.query) {
              return;
            }
            var self = this;
            self.searching = true;
            axios
              .get(encodeURI("/search?q=" + this.query+"&searchSource="+this.searchSource))
              .then(function (response) {
                self.results = response.data;
              })
              .catch(function (error) {})
              .then(function () {
                self.searching = false;
              });
          },
          addPodcastManual: function (e) {
            e.preventDefault();
            if (!this.url) {
              return;
            }
            this.addPodcast({ url: this.url });
          },
          addPodcast: function (item) {
            //  console.log(item);
            var self = this;
            self.searching = true;
            axios
              .post("/podcasts", {
                url: item.url,
              })
              .then(function (response) {
                Vue.toasted.show("Podcast added successfully.", {
                  theme: "bubble",
                  type: "success",
                  position: "top-right",
                  duration: 5000,
                });
                item.already_saved = true;
              })
              .catch(function (error) {
                if (error.response && error.response.data && error.response.data.message) {
                  Vue.toasted.show(error.response.data.message, {
                    theme: "bubble",
                    type: "error",
                    position: "top-right",
                    duration: 5000,
                  });
                }
              })
              .then(function () {
                self.searching = false;
                self.url = "";
              });
            return false;
          },
        },
      });
    </script>
  </body>
</html>
